import React from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'
import dateFormat from 'dateformat'
import { withStyles } from '@material-ui/core/styles'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemAvatar from '@material-ui/core/ListItemAvatar'
import ListItemText from '@material-ui/core/ListItemText'
import Avatar from '@material-ui/core/Avatar'
// import AccountCircle from '@material-ui/icons/AccountCircle'
import {
  topicPrimaryStyles,
  topicSecondaryStyles,
} from './styles'
import { tabs } from '../../utils/variable-define'

const Primary = ({ classes, topic }) => {
  const classNames = cx({ // 颜色区分
    [classes.tab]: true,
    [classes.top]: topic.top,
  })
  return (
    <span className={classes.root}>
      <span className={classNames}>{topic.top ? '置顶' : tabs[topic.tab]}</span>
      <span className={classes.title}>{topic.title}</span>
    </span>
  )
}

Primary.propTypes = {
  classes: PropTypes.object.isRequired,
  topic: PropTypes.object.isRequired,
}

// withStyles 只能定义在类上，不能定义在 pure function
const StyledPrimary = withStyles(topicPrimaryStyles)(Primary)

const Secondary = ({ classes, topic }) => (
  <span className={classes.root}>
    <span className={classes.username}>{topic.author.loginname}</span>
    <span className={classes.count}>
      <span className={classes.replyCount}>回复: {topic.reply_count}</span>
      <span>/</span>
      <span>阅读: {topic.visit_count}</span>
    </span>
    <span>创建时间：{dateFormat(topic.create_at, 'yy年mm月dd日')}</span>
  </span>
)

Secondary.propTypes = {
  classes: PropTypes.object.isRequired,
  topic: PropTypes.object.isRequired,
}

const StyledSecondary = withStyles(topicSecondaryStyles)(Secondary)

const TopicListItem = ({ onClick, topic }) => (
  <List component="nav">
    <ListItem button onClick={onClick}>
      <ListItemAvatar>
        {/* <Avatar src={topic.image} /> */}
        {/* <AccountCircle /> */}
        <Avatar src={topic.author.avatar_url} />
      </ListItemAvatar>
      <ListItemText
        primary={<StyledPrimary topic={topic} />}
        secondary={<StyledSecondary topic={topic} />}
      />
    </ListItem>
  </List>
)

TopicListItem.propTypes = {
  onClick: PropTypes.func.isRequired,
  topic: PropTypes.object.isRequired,
}

export default TopicListItem
